<template>
  <t-form :data="data" :rules="rules" ref="customFormInner"
          layout="inline"
          :labelWidth="labelWidth"
          :disabled="disabled"
          :style="{paddingTop: paddingTop + 'px'}"
          :class="{'custom-form-disabled': disabled, 'custom-form-with-range-ymd': withRangeYMD, 'custom-form-layout-mini': layoutMini, 'custom-form-font-mini': fontMini}"
          scrollToFirstError="smooth"
          @validate="_validate"
  >
    <slot ></slot>
    <slot name="content"></slot>
  </t-form>
</template>

<script>
export default {
  desc: '自定义表单组件',
  name: 'customForm',
  props: {
    /**
     * @Description：数据对象
     * @Date 2023-10-10
     */
    data: {
      type: Object,
      default: () => {}
    },
    /**
     * @Description：校验对象
     * @Date 2023-10-10
     */
    rules: {
      type: Object,
      default: () => {}
    },
    /**
     * @Description：是否禁用
     * @Date 2023-10-10
     */
    disabled: {
      type: Boolean,
      default: () => false
    },
    /**
     * @Description：是否最小布局
     * @Date 2023-10-10
     */
    layoutMini: {
      type: Boolean,
      default: () => false
    },
    /**
     * @Description：是否最小字体
     * @Date 2023-10-10
     */
    fontMini: {
      type: Boolean,
      default: () => false
    },
    /**
     * @Description：顶部编剧
     * @Date 2023-10-10
     */
    paddingTop: {
      type: Number,
      default: () => 0
    },
    /**
     * @Description：标签宽度
     * @Date 2023-10-10
     */
    labelWidth: {
      type: Number,
      default: () => 100
    },
    /**
     * @Description：带区间选择 年月日，这种情况下表单项宽度会加长
     * @Date 2023-10-10
     */
    withRangeYMD: {
      type: Boolean,
      default: () => false
    }
  },
  mounted() {
    let that = this
    $(this.$refs.customFormInner.$el).on("keypress", (e) => {
      if (e.keyCode == "13") {
        that._enter()
      }
    })
  },
  data() {
    return {
    }
  },
  methods: {
    /**
     * @Description：表单校验
     * @Date 2023-10-11
     * @return Promise
     * 使用
     this.$refs.form.validate().then((result) => {
        if (result && result == true) {
        }
      })
    */
    validate(callback) {
      return this.$refs.customFormInner.validate(callback)
    },
    /**
     * @Description：校验结束后触发，result 值为 true 表示校验通过；如果校验不通过，result 值为校验结果列表
     * @Date 2023-11-01
    */
    _validate(result) {
      if (result !== true) {
        // 自动聚焦到校验失败的第一个元素
        let keyFirst = Object.keys(result.validateResult)[0]
        let findIndex = this.$refs.customFormInner.$children.findIndex(item => item.name == keyFirst)
        if (findIndex != -1) {
          let findchild = this.$refs.customFormInner.$children[findIndex]
          if (findchild.focus) {
            setTimeout(() => {
              findchild.focus()
            }, 200)
          }
        }
      }
    },
    /**
     * @Description：回车事件
     * @Date 2023-11-01
    */
    _enter(result) {
      this.$emit('enter')
    }
  },
  watch: {
  },
  computed: {
  }
}
</script>

<style lang="scss">
  /*禁用后隐藏左侧必填项*/
  .custom-form-disabled{
    .t-form__label--required label::before{
      content: '' !important;
    }
  }
  .t-form-inline{
    row-gap: 7px !important;
    .t-form__item{
      margin-right: 0px !important;
    }
    .t-form__label{
      padding-right: 10px !important;
    }
  }

  .t-is-error .t-input__extra{
    text-align: right !important;
    top: 6px;
    right: 25px;
    width: auto;
    height: auto;
    bottom: 0px;
  }

  .custom-form-with-range-ymd .custom-form-item .t-form__controls-content{
    width: 240px !important;
  }

  /*最小布局*/
  .custom-form-layout-mini{
    .t-form__controls,.t-form__controls-content,.form-item-control,.t-form__label{
      min-height: 22px !important;
      line-height: 22px !important;
    }
    row-gap: 1px !important;
  }

  /*最小字体*/
  .custom-form-font-mini{
    .t-form__label,.form-item-control{
      font-size: 12px !important;
    }
  }
</style>
